import React, { useState, CSSProperties } from 'react'
import { useDrag } from 'react-dnd'
import { Statistic } from 'antd'
import { AppstoreTwoTone, PicRightOutlined, PieChartOutlined, PlusSquareOutlined } from '@ant-design/icons';

import { IDraggable } from '../component_type'
import { DRAG_TYPE } from '../../dnd/drag_type'

const WrapDrag = function (props: IDraggable) {
  // console.log('WrapDrag', props)
  const [ dragType ] = useState(props.meta.type)

  const [collected, drag] = useDrag(
    () => ({
      type: dragType,
      item: {...props, type: props.meta.type},
      canDrag: function () {
        return true
      },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )

  const style: CSSProperties = {
    width: '66px',
    height: '66px',
    lineHeight: '66px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1px solid #edd',
    margin: '2px',
    opacity: collected.opacity
  }

  let renderIcon;
  if (props.meta.type === DRAG_TYPE.layout) {
    // 布局组件
    renderIcon = <AppstoreTwoTone style={{ fontSize: '32px', color: '#08c' }} />
  } else if (props.meta.type === DRAG_TYPE.public) {
    // 公共组件
    renderIcon = <PieChartOutlined style={{ fontSize: '32px', color: '#fa0' }} />
  } else if (props.meta.type === DRAG_TYPE.custom) {
    // 自定义组件
    renderIcon = <PicRightOutlined style={{ fontSize: '32px', color: '#0c8' }} />
  } else {
    // 未知组件
    renderIcon = <PlusSquareOutlined style={{ fontSize: '32px', color: '#f65' }} />
  }

  return (
    <div ref={ drag } style={ style }>
      <Statistic 
        title={ renderIcon } 
        value={ props.meta.title } 
        valueStyle={{ fontSize: '12px' }} 
      />
    </div>
  )
}

export default WrapDrag